<template>
    <el-container>
        <el-header>
            <el-menu 
                default-active="activeIndex" 
                active-text-color="#ffd04b" 
                text-color="#fff" 
                background-color="#545c64" 
                class="el-menu-header" 
                mode="horizontal" 
                @select="handleSelect">
                <el-menu-item index="1">logo</el-menu-item>
                <el-menu-item class="fr" index="2">消息中心</el-menu-item>
                <el-menu-item class="fr" index="3">我的工作台</el-menu-item>
            </el-menu>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                    default-active="1"
                    class="el-menu-aside"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>               
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: 'App'
}
</script>

<style scoped>
.el-container {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0;
    bottom: 0;

}
.el-header {
    background-color: #545c64;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 0;
    z-index: 1000;
    
}
.el-header .fr {
    float: right;
}
.el-header .el-menu {
    border-bottom: none;
}
.el-aside, .el-main{
    padding-top: 60px;
}

.el-aside {
    background-color: #545c64;
    color: #333;
    text-align: center;
    line-height: 200px;
}
.el-aside .el-menu{
    border-right: none;
}
.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
</style>